<template>
	<view class="content_home">
		<NavTabbar activeTab="home"></NavTabbar>
		<view class="box_scroll">
			<scroll-view class="scroll-view_list" scroll-y="true">
				<view class="list_store">
					<!-- <view class="navbar"> -->
					<!-- <view class="fixed"> -->
					<!-- 设置占位 将微信小程序的状态栏高度预留出来 -->
					<!-- 时间状态 -->
					<!-- <view :style="{height: navbarStatusHeight+'px'}"></view> -->
					<!-- 胶囊按钮 -->
					<!-- <view class="navbar-content" :style="{width:navBarWidth+'px',height:navBarHeight+'px'}"></view> -->
					<!-- </view> -->
					<!-- 时间占位 -->
					<!-- <view :style="{height:navbarStatusHeight+'px' }"></view> -->
					<!-- </view> -->
					<!-- 轮播图 -->
					<view class="uni-margin-wrap">
						<swiper
							autoplay="3000"
							:indicator-dots="false"
							:disable-touch="true"
							indicator-active-color="#fff"
							indicator-color="#d9d9d9"
						>
							<swiper-item
								v-for="(image, index) in images"
								@click="navigateToWebView(index)"
								:key="index"
							>
								<image
									src="/pages_user/img/home3.jpg"
									class="img"
									mode="aspectFill"
								></image>
							</swiper-item>
						</swiper>
					</view>
					<!-- 通告  隐藏-->
					<!-- <view class="notice-bar">
						<uni-notice-bar color="#007cff" background-color="#EAF2FF" showIcon showClose scrollable single
							text="这是通知栏! 这是通知栏! 这是通知栏!"></uni-notice-bar>
					</view> -->
					<view class="card">
						<view class="title_top">长青服务中心</view>
						<view class="card_min" style="padding-top: 12rpx">
							<view
								v-for="(i, index) in dataList1"
								@click="ondataList(index)"
								class="card_item"
								:key="index"
							>
								<image class="bor_img" :src="i.icon"></image>
								<view class="right_text">
									<p class="text">{{ i.text }}</p>
									<!-- <p class="tip">{{i.tip}}</p> -->
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="card2">
						<view class="title_top">增值服务</view>
						<view class="card_min card_min_">
							<view
								v-for="(i, index) in dataList2"
								@click="ondataList2(index)"
								class="card_item"
								:key="index"
							>
								<view class="right_text">
									<p class="text">
										<image
											style="width: 40rpx; height: 40rpx"
											:src="i.icon"
										></image>
										{{ i.text }}
									</p>
									<p class="tip">{{ i.tip }}</p>
								</view>
							</view>
						</view>
					</view> -->
					<view class="card2">
						<view class="title_top">自助查询</view>
						<view class="card_min card_min_bg">
							<view
								v-for="(i, index) in dataList3"
								@click="ondataList3(i.label)"
								class="card_item card_item_"
								:key="index"
							>
								<image class="bor_img" :src="i.icon"></image>
								<view class="right_text">
									<p
										class="text"
										:class="i.text === '激活质保' ? 'font-color-0075c2' : ''"
									>
										{{ i.text }}
									</p>
									<p class="tip">{{ i.tip }}</p>
								</view>
							</view>
						</view>
					</view>

					<!-- <view
						class="bg-white pt-24rpx pl-48rpx pr-80rpx pb-24rpx box-border-box m-lr-24rpx box-shadow"
					>
						<view
							class="flex justify-space-between align-center"
							@click="toCustomerServicePages"
						>
							<view>
								<text class="font-24rpx font-bold">在线客服</text>
								<text class="font-22rpx">（9:00至18:00）</text>
							</view>
							<view class="font-color-0075c2 font-24rpx">
								联系客服
								<uni-icons type="chatbubble-filled"></uni-icons>
							</view>
						</view>
						<view
							class="border-bottom-style-solid border-bottom-width-2rpx border-bottom-color-240 m-tb-24rpx"
						></view>
						<view
							class="flex justify-space-between align-center"
							@click="makePhoneCall('400-832-8218')"
						>
							<view>
								<text class="font-24rpx font-bold">服务电话</text>
								<text class="font-22rpx">（8:00至22:30）</text>
							</view>
							<view class="font-color-0075c2 font-24rpx">
								400-832-8218
								<uni-icons type="phone-filled"></uni-icons>
							</view>
						</view>
					</view> -->

					<!-- <view class="card">
						<view class="title_top">更多好物</view>
						<view
							style="
								color: #999;
								height: 340rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								padding: 0 24rpx;
								box-sizing: border-box;
								margin-bottom: 40rpx;
							"
						>
							<image
								@click="navigateToWebView(0)"
								src="/pages_user/img/goods.jpg"
								style="height: 100%; width: 100%; border-radius: 5rpx"
								mode="aspectFit"
							></image>
						</view>
					</view> -->
				</view>
			</scroll-view>
			<wayType
				ref="wayTypeRef"
				@value-change="addWorkor"
				:showpopup="showBottom"
			></wayType>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {ref, onMounted} from 'vue';
	import store from '@/store/index.js';
	import {onShow, onUnload} from '@dcloudio/uni-app';
	import NavTabbar from '@/components/u-user/nav-tabbar.vue';
	import wayType from '@/components/u-user/wayType.vue';
	const showBottom = ref(false); //申请工单弹窗
	const navbarStatusHeight = ref(0);
	const navBarHeight = ref(0);
	const navBarWidth = ref(375);
	const wayTypeRef = ref();
	const images = ref(['/pages_user/img/home3.jpg']);
	// 更多好物
	const navigateToWebView = (val) => {
		// if (val == 0) {
		// 	uni.navigateToMiniProgram({
		// 		appId: 'wx4d49aa06ddaf9965',
		// 		path: 'pages/index_two/index',
		// 		// success(res) {
		// 		//   // 打开成功
		// 		// }
		// 	});
		// }
	};
	const dataList1 = ref([
		{
			icon: '/static/home/serve/home1.svg',
			text: '安装报单',
			tip: '申请售后服务',
		},
		{
			icon: '/static/home/serve/home2.svg',
			text: '维修报单',
			tip: '申请售后服务',
		},
		// {
		// 	icon: "/static/home/serve/home3.svg",
		// 	text: "保养清洗",
		// 	tip: "申请售后服务"
		// },
		// {
		// 	icon: '/static/home/serve/home4.svg',
		// 	text: '旧机返厂',
		// 	tip: '返厂维修换新',
		// },
		// {
		// 	icon: '/static/home/serve/home5.svg',
		// 	text: '蓝牙遥控',
		// 	tip: '返厂维修换新',
		// },
	]);
	const dataList2 = ref([
		{
			icon: '/static/home/icon2/wash.svg',
			text: '清洗服务',
			tip: '家电清洗，不限品牌',
		},
		{
			icon: '/static/home/icon2/extend.svg',
			text: '延保服务',
			tip: '原厂延保，费用全免',
		},
	]);
	const dataList3 = ref([
		{
			icon: '/static/home/icon2/home1.svg',
			text: '我的工单',
			tip: '查看工单详情',
			label: 'my_order',
		},
		{
			icon: '/static/home/icon2/home2.svg',
			text: '我的产品',
			tip: '查看产品信息',
			label: 'my_product',
		},
		{
			icon: '/static/home/icon2/home3.svg',
			text: '真伪查询',
			tip: '查询商品真伪',
			label: 'security_query',
		},
		{
			icon: '/static/home/icon2/home4.svg',
			text: '知识中心',
			tip: '查看说明书相关',
			label: 'knowledge_center',
		},
		{
			icon: '/static/home/icon2/home5.svg',
			text: '收费标准',
			tip: '查看服务费用收取',
			label: 'charge_standard',
		},
		{
			icon: '/static/home/icon2/home6.svg',
			text: '保修政策',
			tip: '查看商品保修信息',
			label: 'warranty_policy',
		},
	]);
	onUnload(() => {
		uni.hideLoading();
	});

	const ondataList = async (val) => {
		switch (val) {
			case 0:
				await wayTypeRef.value.open(1);
				showBottom.value = true;
				break;
			case 1:
				await wayTypeRef.value.open(2);
				showBottom.value = true;
				break;
			case 2:
				store.commit('setrepairGoodsVos', []);
				uni.navigateTo({
					url: `/pages_user/return_factory/return_factory`,
				});

				break;
			case 3:
				uni.navigateTo({
					url: `/pages_user/ctrl/ctrl`,
				});
				break;
		}
	};
	// 增值服务
	const ondataList2 = async (val) => {
		if (val == 0) {
			uni.navigateToMiniProgram({
				appId: 'wx4d49aa06ddaf9965',
				path: '/pages/goods_details/index?proSpu=172438876303013571&proSku=172438876303591173',
			});
		} else if (val == 1) {
			uni.navigateToMiniProgram({
				appId: 'wx4d49aa06ddaf9965',
				path: 'pages/goods_details/index?proSpu=172716507461372503&proSku=172716507461875814',
			});
		}
	};
	// 跳转企业微信
	const toCustomerServicePages = () => {
		uni.openCustomerServiceChat({
			extInfo: {
				url: 'https://work.weixin.qq.com/kfid/kfcc526b1480c40e698', //客服ID
			},
			corpId: 'ww4e67a7a0208a98c5', //企业微信ID
			success(res) {},
			fail(err) {
				uni.showToast({
					title: '开发者工具暂时不支持此 API 调试，请使用真机进行开发',
					icon: 'none',
				});
			},
		});
	};
	// 自助查询
	// 0==售后申请 1==在线寄修 2==防伪查询 3==知识中心
	const ondataList3 = async (
		val:
			| 'my_order'
			| 'my_product'
			| 'knowledge_center'
			| 'charge_standard'
			| 'warranty_policy'
			| 'security_query',
	) => {
		switch (val) {
			case 'my_order':
				uni.navigateTo({
					url: '/pages_user/order/index',
				});
				break;
			case 'my_product':
				uni.navigateTo({
					url: '/pages_user/goods/goods',
				});
				break;
			case 'security_query':
				uni.navigateTo({
					url: '/pages_user/home/truthSearch',
				});
				break;
			case 'knowledge_center':
				uni.navigateTo({
					url: '/pages_user/know/know',
				});
				break;
			case 'charge_standard':
				uni.navigateTo({
					url: '/pages_user/fee/fee',
				});
				break;
			case 'warranty_policy':
				uni.navigateTo({
					url: '/pages_user/fee/fee?policy=1',
				});
				break;
			// default:
			// 	uni.showToast({
			// 				title: "正在维护中，敬请期待...",
			// 				duration: 2000,
			// 				icon: "none"
			// 			})
			// 	break;
		}
	};
	// 选择申请方式
	const addWorkor = (item) => {
		store.commit('setWayType', {
			id: item.id,
			name: item.name,
			type: item.type, //1安装
			factoryId: '',
			isHousehold: item.isHousehold, // 0-非家用, 1-家用
		});
		showBottom.value = false;
		uni.navigateTo({
			url: '/pages_user/home/way/way',
		});
	};
	// 调起拨打电话的功能
	const makePhoneCall = (phoneNumber: string) => {
		uni.makePhoneCall({
			phoneNumber: phoneNumber,
		});
	};
	onMounted(() => {
		const info = uni.getSystemInfoSync();
		navbarStatusHeight.value = info.statusBarHeight;
		// 根据微信小程序的右上侧的胶囊样式 设置导航栏内容的高度
		// 条件编译 以下三个不支持胶囊样式
		// #ifndef H5 || APP-PLUS || MP-ALIPAY
		const menuInfo = uni.getMenuButtonBoundingClientRect();
		// 导航栏内容的高度 = (胶囊底部的高度 - 状态栏的高度) + (胶囊顶部的高度 -      )
		navBarHeight.value =
			menuInfo.bottom -
			info.statusBarHeight +
			(menuInfo.top - info.statusBarHeight);
		// 导航栏内容的宽度  除开胶囊按钮左侧的内容宽度
		navBarWidth.value = menuInfo.left;
		// #endif
	});
</script>

<style lang="scss" scoped>
	.content_home {
		background-color: #fafafa;
		height: 100vh;
		overflow-y: hidden;
		display: flex;
		flex-direction: column;

		.box_scroll {
			flex: 1;
			height: 100%;
		}

		.scroll-view_list {
			::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
				color: transparent;
			}

			height: calc(100% - 120rpx);

			.list_store {
				height: 100%;
				display: flex;
				flex-direction: column;
				row-gap: 20rpx;
			}
		}

		:deep(.notice-bar) {
			// padding-top: 24rpx;
		}

		.uni-margin-wrap {
			:deep(swiper) {
				height: 480rpx;
				background-color: #fff;
			}

			:deep(uni-swiper) {
				height: 480rpx;
				background-color: #fff;
			}

			.img {
				width: 100%;
				display: block;
			}
		}

		.title_top {
			font-size: 32rpx;
			font-weight: bold;
			color: #000;
			padding: 0 24rpx 8rpx;
		}

		.card {
			// filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.1));
			:deep(.uni-grid-item__box) {
				align-items: center;
				justify-content: center;
			}

			.card_min {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				align-items: center;
				font-size: 28rpx;
				padding: 24rpx;
				margin: 0 24rpx;
				background-color: #fff;
				border-radius: 5rpx;

				.card_item {
					width: 20%;
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					box-sizing: border-box;
					background-color: #fff;

					.bor_img {
						width: 70rpx;
						height: 70rpx;
						margin: 12rpx;
					}

					.right_text {
						font-size: 28rpx;

						.text {
							color: #383838;
							font-size: 24rpx;
							font-weight: bold;
						}

						.tip {
							color: #808080;
							font-size: 24rpx;
							margin-top: 8rpx;
						}
					}
				}
			}
		}

		.card2 {
			// filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.1));
			:deep(.uni-grid-item__box) {
				align-items: center;
				justify-content: center;
			}

			.card_min_bg {
				background-color: #fff;
				padding: 24rpx;

				.card_item {
					background-color: #f6f7fa;
					padding: 20rpx;
				}
			}

			.card_min_ {
				.card_item {
					background-color: #fff;
					padding: 0 24rpx;

					.right_text {
						// background-color: #F2F9FF;
						padding: 24rpx;
						flex: 1;
						row-gap: 12rpx;

						.text {
							color: #383838;
						}

						.tip {
							color: #777;
						}
					}
				}
			}

			.card_min {
				display: flex;
				flex-wrap: wrap;
				// justify-content: center;
				align-items: center;
				font-size: 28rpx;
				margin: 0 24rpx;
				border-radius: 5rpx;
				column-gap: 20rpx;
				row-gap: 18rpx;
				box-sizing: border-box;

				.card_item {
					width: calc(50% - 12rpx);
					display: flex;
					align-items: center;
					border-radius: 5rpx;
					box-sizing: border-box;
					column-gap: 12rpx;

					.bor_img {
						width: 55rpx;
						height: 55rpx;
					}

					.right_text {
						font-size: 28rpx;
						// margin-left: 20rpx;
						display: flex;
						flex-direction: column;

						.text {
							// color: #000;
							font-size: 28rpx;
							font-weight: bold;
							display: flex;
							align-items: center;
							column-gap: 10rpx;
						}

						.tip {
							color: #777;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
</style>
<style lang="scss">
	.navbar {
		.fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			// background-color: $uni-color-primary;
		}
	}
</style>
